<template>
	<view class="layout">
		<view class="content">
			<view class="item" v-for="item in articleArr" :key="item._id" @click="goDetail(item._id)">
				<view class="left">
					<view class="top">{{item.title}}</view>
					<view class="bottom">
						<view class="author">{{item.author}}</view>
						<view class="time">
							<uni-dateformat :date="item.createTime" format='MM-dd'
								:threshold="[0,3600000]"></uni-dateformat>
						</view>

						<view class="del">删除</view>
					</view>
				</view>
				<view class="right">
					<image v-if="item.picUrls && item.picUrls.length" :src="item.picUrls[0]" mode="aspectFit"></image>
					<image v-else src="/static/logo.png" mode="aspectFit"></image>
				</view>
			</view>


		</view>
		<view class="">
			<uni-load-more status="loading" v-if="loadingStatus"></uni-load-more>
			<uni-load-more status="noMore" v-else></uni-load-more>
		</view>
		<view class="goAdd" @click="goAdd">+</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '../../util/date'
	export default {
		data() {
			return {
				title: 'Hello',
				articleArr: [],
				loadingStatus: false,
				noData: false
			}
		},
		onShow() {
			this.articleArr = []
			this.getArticle()
		},
		onPullDownRefresh() {
			this.articleArr = []
			console.log("下拉刷新");
			this.getArticle(true)
		},
		onReachBottom() {
			console.log("触底了");
			if (this.noData) return
			this.getArticle()
		},
		methods: {
			goAdd() {
				uni.navigateTo({
					url: "/pages/add/add"
				})
			},
			getArticle() {
				console.log("this.articleArr.length", this.articleArr.length);
				this.loadingStatus = true

				console.log("this.articleArr.length", this.articleArr.length);
				uniCloud.callFunction({
					name: "get_article",
					data: {
						skip: this.articleArr.length
					}
				}).then(res => {
					console.log(res);
					this.loadingStatus = false
					if (res.result.affectedDocs === 0) {
						// 没有更多内容
						console.log("没有更多内容");
						this.noData = true
					} else {
						this.noData = false
					}

					let oldList = this.articleArr
					console.log("oldList", oldList);
					console.log("res.result.data", res.result.data);
					let newList = [...oldList, ...res.result.data]
					this.articleArr = newList
					// this.articleArr = res.result.data
					uni.stopPullDownRefresh()
				}).catch(err => {
					console.log("err", err);
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		.content {
			padding: 30rpx;
			line-height: 1.5;

			.item {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #d9d9d9;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						font-size: 35rpx;
						color: #333;
						// 限制两行 内容溢出
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.bottom {
						display: flex;
						// justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						color: #999;

						view {
							margin-right: 20rpx;
						}
					}
				}

				.right {
					width: 200rpx;
					height: 180rpx;
					margin-left: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.goAdd {
			width: 100rpx;
			height: 100rpx;
			background-color: #2b9939;
			border-radius: 50%;
			color: #fff;
			font-size: 56rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			right: 60rpx;
			bottom: 100rpx;
		}
	}
</style>